<template>
    <div class="list_page">

        <search :list="searchList" @query="setParams"></search>

        <hkTable :columns="tableColumns" :url="url" :params="params" >

            <template #TheFirstTime="{ record }">
                {{ record.TheFirstTime }}
            </template>

            <template #tools="{ record }">
                <a-button type="text" @click="tool(record)">编辑</a-button>
                <a-button type="text" status="danger" @click="tool(record)">删除</a-button>
            </template>

        </hkTable>
    </div>
</template>

<script setup>
    import search from '@components/local/search'
    import hkTable from '@components/local/hkTable'

    // 写一个模拟数据
    const mockData = [
        {city: 'bj', text: 'Beijing'},
        {city: 'sh', text: 'Shanghai'},
        {city: 'gz', text: 'Guangzhou'},
        {city: 'cd', text: 'Chengdu'},
    ]

    // 查询列表配置
    const searchList = [
        {label:'名称', code:'Name',defaultValue:'初始默认值'},
        {
            label:'区域',  // 表单项名称
            type:'select', // 类型
            code:'Area', // value COde
            config:{  // 官方原生的配置项
             options:[ ...mockData],
             fieldNames:{value: 'city', label: 'text'}
            }
        },
        {
            label:'类型',  // 表单项名称
            type:'treeSelect', // 类型
            code:'type1', // value COde
            config:{  // 官方原生的配置项
                data:[ ...mockData ],
                fieldNames:{key: 'city', title: 'text'}
            }
        },
        // {
        //     label:'时间',  // 表单项名称
        //     type:'rangePicker', // 类型
        //     code:'time1', // value COde
        // }
    ]

    // 表格列配置项 ， 详情配置查看官方文档
    const tableColumns = [
        {title:'主体名称' , dataIndex:'FirmName'},
        {title: '主体类型', dataIndex: 'FirmTypeName'},
        {title: '统一社会信用代码', dataIndex: 'FirmStandardNumber'},
        {title: '主体地址', dataIndex: 'AreaName'},
        {title: '法定代表人', dataIndex: 'Address'},
        {title: '监管单位', dataIndex: 'OrgName'},
        {title: '时间', dataIndex: 'TheFirstTime', width:300},
        {title: '操作', dataIndex: 'tools', width:300},
    ]

    const params = ref({})

    const url = $Server.firm.GetCac_QLYFirmByAreaOrTypeId

    // 查询
    const setParams=(data)=>{
        params.value = {
            ...data,
            reset: !params.reset  // 辅助刷新字段，用于记录每次点击查询时触发更新
        }
    }

    const tool=(record)=>{
        $message.success(JSON.stringify(record))
    }

</script>

<style scoped lang="less">
    .list_page{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
</style>